<template>
  <div>
    <header-top :fixed="true">
      <template #middle>已完成的订单列表</template>
    </header-top>
    <div
      class="container"
      :style="{ height: innerWidth }"
      v-show="!$store.state.isLogin"
    >
      <div class="img">
        <img src="../../assets/images/order/person.png" alt="" />
      </div>
      <div class="desc">登录后查看外卖订单</div>
      <mt-button type="danger" @click="$router.push('/login')"
        >立即登录</mt-button
      >
    </div>
    <div v-show="$store.state.isLogin" class="order" v-if="shopCatList">
      <div class="order-container" v-show="shopCatList.length > 0">
        <div class="history">刚刚下单</div>

        <div class="item">
          <div class="header">
            <div class="left">
              <img
                src="https://fuss10.elemecdn.com/8/40/02872ce8aefe75c16d3190e75ad61jpeg.jpeg"
              />
            </div>
            <div class="right">
              <div class="title">嘉禾一品（温都水城）</div>
            </div>
          </div>
          <div
            class="section section-mt"
            v-for="(item, i) of shopCatList"
            :key="i"
          >
            <div class="img_cover">
              <img :src="item.image" />
              <div class="name">{{ item.name }}</div>
            </div>

            <div class="price">
              <p>￥{{ item.subtotal }}</p>
              <span>共 {{ item.count }} 件 </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="$store.state.isLogin" class="order" v-if="shopCatListStatic">
      <div class="order-container">
        <div class="history">历史订单</div>
        <div class="item">
          <div class="header">
            <div class="left">
              <img
                src="https://fuss10.elemecdn.com/8/40/02872ce8aefe75c16d3190e75ad61jpeg.jpeg"
              />
            </div>
            <div class="right">
              <div class="title">嘉禾一品（温都水城）</div>
            </div>
          </div>
          <div
            class="section section-mt"
            v-for="(item, i) of shopCatListStatic"
            :key="i"
          >
            <div class="img_cover">
              <img :src="item.image" />
              <div class="name">{{ item.name }}</div>
            </div>

            <div class="price">
              <p>￥{{ item.subtotal }}</p>
              <span>共 {{ item.count }} 件 </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div
      v-if="Array.isArray(shopCatList) && shopCatList.length < 1"
      class="order"
    >
      您还没有订单呢
    </div> -->
  </div>
</template>

<script>
import HeaderTop from "../../components/headerTop/HeaderTop.vue";

export default {
  data() {
    return {
      innerWidth: window.innerHeight,
      shopCatList: null,
      shopCatListStatic: [
        {
          name: "娃娃菜炖豆腐",
          price: 20,
          oldPrice: "",
          count: 3,
          subtotal: 60,
          description: "",
          sellCount: 43,
          rating: 92,
          info: "",
          ratings: [
            {
              username: "3******c",
              rateTime: 1469281964000,
              rateType: 0,
              text: "菜量还可以,味道还可以",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
            {
              username: "2******3",
              rateTime: 1469271264000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
          ],
          icon: "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
          image:
            "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750",
        },
        {
          name: "手撕包菜",
          count: 2,
          subtotal: 32,
          price: 16,
          oldPrice: "",
          description: "",
          sellCount: 29,
          rating: 100,
          info: "",
          ratings: [
            {
              username: "3******c",
              rateTime: 1469281964000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
            {
              username: "2******3",
              rateTime: 1469271264000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
          ],
          icon: "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
          image:
            "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750",
        },
        {
          name: "香酥黄金鱼/3条",
          price: 11,
          oldPrice: "",
          description: "",
          sellCount: 15,
          rating: 100,
          info: "",
          count: 2,
          subtotal: 22,
          ratings: [
            {
              username: "3******c",
              rateTime: 1469281964000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
            {
              username: "2******3",
              rateTime: 1469271264000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
          ],
          icon: "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
          image:
            "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750",
        },
        {
          name: "红豆薏米美肤粥",
          price: 12,
          count: 1,
          subtotal: 12,
          oldPrice: "",
          description: "甜粥",
          sellCount: 86,
          rating: 100,
          info: "美肤粥对皮肤有很好的保养作用",
          ratings: [
            {
              username: "3******c",
              rateTime: 1469281964000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
            {
              username: "2******3",
              rateTime: 1469271264000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
            {
              username: "3******b",
              rateTime: 1469261964000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
          ],
          icon: "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
          image:
            "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750",
          images: [
            "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750",
            "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750",
            "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750",
          ],
        },
        {
          name: "八宝酱菜",
          count: 3,
          subtotal: 12,
          price: 4,
          oldPrice: "",
          description: "",
          sellCount: 84,
          rating: 100,
          info: "八宝酱菜八宝酱菜八宝酱菜八宝酱菜八宝酱菜",
          ratings: [
            {
              username: "3******c",
              rateTime: 1469281964000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
            {
              username: "2******3",
              rateTime: 1469271264000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
            {
              username: "3******b",
              rateTime: 1469261964000,
              rateType: 0,
              text: "",
              avatar:
                "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
            },
          ],
          icon: "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
          image:
            "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750",
        },
      ],
    };
  },

  components: { HeaderTop },

  computed: {},

  methods: {},
  mounted() {
    this.shopCatList = this.$store.state.shopcar.resultShopList;
    console.log(this.shopCatList);
    // Array.isArray;
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>


.container
  height: calc(100vh - 20vh);
  display: flex
  align-items: center
  justify-content: center
  flex-flow: column;
.img img
    width: 220px;
    height: 220px;
    display: block;

.desc
    color: #9d9d9d;
    font-size: 18px;
    margin-top: 20px
    margin-bottom: 20px
button
  font-size:18px
  background-color: #009375
  padding:15px 20px

.mint-button
    height: initial;
    overflow: inherit;
</style>

<style lang="stylus" rel="stylesheet/stylus" scoped>
// 订单样式
.order
  margin-top:10px;
  .order-container
    .item
      padding: 20px;
      border-radius: 20px;
      background-color: #fff
      margin-top: 10px

      .header
        display: flex;
        .left
          margin-right: 10px;
          img
            width:45px;
            height:45px;
        .right
          > .title
            font-size:20px;
            font-weight:900
      .section
        display: flex;
        align-items: center;
        justify-content: space-between;
        .img_cover
          display: flex;
          align-items: center
          img
            width: 100px;
            height: 85px;
            border-radius: 15%;
            margin-right: 10px;

          .name
            font-size:16px;
            width:155px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap
        .price
          p
            font-size:20px;
            color:#f00;
            margin:0;
          >span
            font-size:13px;
            font-weight:bold;
            color: #867b7b
.section-mt
  margin-top:20px
.history
  margin:20px;
  font-size:20px;
  font-weight:bold
</style>
